<template>
    <div class="app-container course-add course width-label">
      <div class="edit-title-line">基本信息</div>
      <el-form ref="addCourseForm" :model="addCourseForm" :rules="addCourseFormRules" >
        <div>
          <el-form-item label="标题：" class="normal-form-item" prop="title" >
            <el-input v-model="addCourseForm.title"
                      class="width-300"
                      size="small"
                      maxlength="30"
                      @focus="clearFormValidate('title')"
                      ref="elInput"
                      ></el-input>
          </el-form-item>
        </div>
       <div>
         <el-form-item label="类型：" class="normal-form-item" prop="courseType">
           <el-select v-model="addCourseForm.courseType"
                      placeholder="请选择" class="width-300"
                      size="small" clearable >
             <el-option
               v-for="item in courseTypeData"
               :key="item.code"
               :label="item.label"
               :value="item.code">
             </el-option>
           </el-select>
         </el-form-item>
       </div>
        <div>
          <el-form-item label="学期：" class="normal-form-item"  prop="semesterCode">
            <el-select v-model="addCourseForm.semesterCode"
                       placeholder="请选择" class="width-300"
                       size="small"
                       @change="handleChangeSemester"
                       clearable >
              <el-option
                v-for="item in schoolSemesterList"
                :key="item.code"
                :label="item.label"
                :value="item.code">
              </el-option>
            </el-select>
          </el-form-item>
        </div>
        <div>
          <el-form-item label="学科：" class="normal-form-item" prop="subjectType">
            <el-select v-model="addCourseForm.subjectType" @change="handleSubjectChange" placeholder="请选择" class="width-300"  size="small"  clearable >
              <el-option
                v-for="item in subjectTypeData"
                :key="item.subjectId"
                :label="item.subjectName"
                :value="item.subjectId">
              </el-option>
            </el-select>
          </el-form-item>
        </div>
        <div>
          <el-form-item label="年级：" class="normal-form-item" prop="gradeType">
            <el-select v-model="addCourseForm.gradeType" placeholder="请选择"
                       class="width-300" @change="handleGradeChange" size="small" clearable >
              <el-option
                v-for="(item, index) in gradeTypeData"
                :key="index"
                :label="item.name"
                :value="item.distanceYear">
              </el-option>
            </el-select>
          </el-form-item>
        </div>

        <div>
          <el-form-item label="班级：" class="normal-form-item" prop="classData">
            <el-checkbox :indeterminate="isIndeterminate" v-model="checkAllClass" @change="handleCheckAllClassChange">全选</el-checkbox>
            <div style="margin: 15px 0;"></div>
            <el-checkbox-group v-model="addCourseForm.classData" @change="handleCheckedClassChange">
              <el-checkbox v-for="classItem in classData"
                           :label="classItem.classId"
                           :key="classItem.classId">
                            {{classItem.className}}
              </el-checkbox>
            </el-checkbox-group>
          </el-form-item>
        </div>

        <div class="edit-title-line">附件</div>
        <el-upload
          style="display: block"
          class="upload-demo course-add-file"
          ref="batchUpload"
          :action="fileUploadUrl"
          :accept="acceptFileType"
          :before-upload="beforeFileUpload"
          :on-success="handleFileUploadSuccess"
          :on-change="uploadFileListChange"
          :on-remove="handleUploadFileRemove"
          :file-list="uploadFileList"
        >
          <div class="batchUpload-button" style="margin-bottom: 10px">
            <el-button slot="trigger" size="small" type="primary">添加附件</el-button>
          </div>
          <div slot="tip" class="el-upload__tip">最大可上传不超过20M的文档，最多可上传3个文件，支持word、excel、PPT、图片。</div>
        </el-upload>
        <div class="course-detail-annex-list">
          <div class="annex-list-item" v-for="(item, index) in uploadFileList" :key="index">
            <div class="annex-list-item-index">{{index+1}}</div>
            <div class="annex-list-item-annexName">{{item.name}}</div>
            <div class="annex-list-item-delete" @click="deleteAnnex(index)">删除</div>
          </div>
        </div>
        <div class="edit-title-line">备课内容</div>
        <div>
          <!--<editor-bar @mouseenter="handleEditorMouseEnter"   v-model="addCourseForm.courseContent.editor" ></editor-bar>-->
          <tinymce v-model="addCourseForm.courseContent.editor" :height="600" />
        </div>
        <div style="margin-top: 20px">
          <el-form-item>
            <el-button type="primary" style="margin-right: 20px" @click="addCourseFormSubConfirm">保存</el-button>
            <el-button @click="cancelConfirm=true">取消</el-button>
          </el-form-item>
        </div>
      </el-form>
      <el-confirm-dialog
        elTip="确定要取消吗，若取消当前信息将不会保存？"
        :showDialog="cancelConfirm"
        :confirmSubmit="elConfirmDialogSubmit"
        :confirmCancel="elConfirmDialogCancel"
        @closeDialog = "elConfirmDialogClose"
      >
      </el-confirm-dialog>
    </div>
</template>

<script>
  import ElConfirmDialog from '@/components/ElConfirmDialog/index.vue'
  import Tinymce from '@/components/Tinymce'
  import {getSubjectList, getSchoolGradeList, getSchoolClassList, getSchoolSemesterList, saveOrUpdatePLesson} from '@/api/api.js'
  import {getCurrentSemesterTerm} from '@/utils/utils.js'
  import {mapGetters} from 'vuex'
  import  moment from 'moment'
    export default {
        name: "courseAdd",
        components: {
          ElConfirmDialog,
          Tinymce
        },
      computed: {
        ...mapGetters([
          'userInfo'
        ])
      },
        data() {
          return {
                   fileUploadUrl: process.env.VUE_APP_BASE_API + '/pub/upload/img?code=6',
                  //文件上传类型
                  acceptFileType: ".xls, .xlsx, .ppt, .pptx, .doc, .docx, image/*",
                  fileType: [
                  'gif',   'jpeg',  'jpg',  'bmp',  'png', 'ppt', 'pptx',  'doc', 'docx', 'xls', 'xlsx'
                ],
                  //班级列表
                  classData: [],
                  //班级全选
                  checkAllClass: false,
                  isIndeterminate: false,
                  //年级类型
                  gradeTypeData: [],
                  //学年学期list
                  schoolSemesterList: [],
                  currentSemester: {
                  semesterId : '',
                    schoolYear : '',
                    term: '',
                },
                currentSubject: {
                  subjectId: '',
                    subjectName : '',
                    subjectCode : '',
                    subjectType : '',
                    subjectLevel : '',
                },
                currentGrade: {
                  gradeName: '',
                    distanceYear: '',
                },
                // 学科类型
                subjectTypeData: [ ],
                  //备课类型
                  courseTypeData: [
                  {code: 1, label: "教案"},
                  {code: 2, label: "单元测试分析"},
                  {code: 3, label: "单元教学分析"},
                  {code: 4, label: "教学计划及进度"},
                ],

                  addCourseForm: {
                  title: '',
                    courseType: '',
                    subjectType: '',
                    gradeType:'',
                    annexList: [],
                    classData: [],
                    semesterCode : '',
                    prepareLessons: '', //备课内容
                    courseContent: {
                    editor: '',
                      isClear : false,
                  }
                },
                addCourseFormRules: {
                  title : [
                    { required: true, message: '必填项，请填写！', trigger: 'blur' },
                    { max: 30, message: '最多 30 个字符', trigger: 'blur' }
                  ],
                    courseType: [
                    { required: true, message: '必填项，请填写！', trigger: 'change' }
                  ],
                    semesterCode : [
                    { required: true, message: '必填项，请填写！', trigger: 'change' }
                  ],
                    gradeType : [
                    { required: true, message: '必填项，请填写！', trigger: 'change' }
                  ],
                    classData: [
                    { required: true, message: '必填项，请填写！', trigger: 'change' }
                  ],
                    subjectType: [
                    { required: true, message: '必填项，请填写！', trigger: 'change' }
                  ]
                },
                // 文件上传列表
                uploadFileList: [],

                  //询问框
                  cancelConfirm: false,
              //php 调代课
              phpGradeList: []
              }
            },
            methods: {
              // 班级全选
              handleCheckAllClassChange(val) {
                if(val) {
                  this.addCourseForm.classData = this.classData.map(item => {
                    return item.classId
                  })
                } else {
                  this.addCourseForm.classData = []
                }
                this.isIndeterminate = false;
              },
              // 班级checkBox变化
              handleCheckedClassChange(value)  {
                let checkedCount = value.length;
                this.checkAllClass = checkedCount === this.classData.length;
                this.isIndeterminate = checkedCount > 0 && checkedCount < this.classData.length;
              },
              //年级变化获取对应的班级
              handleGradeChange() {
                let tempGrade = this.getGradeMsgByDistanceYear(this.addCourseForm.gradeType);
                if (tempGrade == null) {
                  this.classData = []
                  return ;
                }
                this.currentGrade.distanceYear = tempGrade.distanceYear;
                this.currentGrade.gradeName = tempGrade.name;
                let params = {
                  grade : tempGrade.name,
                  distanceYear: tempGrade.distanceYear
                }
                getSchoolClassList(params).then(res => {
                  if (res.code == 200) {
                    this.classData = []
                  if (this.phpGradeList.length < 0 || res.result.length < 0)  {
                    this.classData = []
                    return
                  }

                  for (let tempClass of res.result) {
                    for (let phpGrade of this.phpGradeList) {
                      if (phpGrade.classId == tempClass.classId && this.currentGrade.distanceYear == tempClass.distanceYear) {
                        this.classData.push(tempClass)
                      }
                    }
                  }
                  } else {
                    this.$alert('学校还未维护该年级下班级  信息，请联系华育技术支持进行初始化！', '提示', {
                      confirmButtonText: '我知道了',
                    });
                  }
                })
              },
              /** 附件上传相关 **/
              beforeFileUpload(file, fileList) {
                  // if (file.name && fileList > 0) {
                  //   for (let fileItem of fileList) {
                  //     if (file.name == fileItem.name) {
                  //       this.$message.warning("该文件已存在")
                  //       return false
                  //     }
                  //   }
                  // }
              },
              handleFileUploadSuccess(res, file) {
                // console.log(res);
                // console.log(file)
                // console.log(this.uploadFileList)
              },
              uploadFileListChange(file, fileList) {
                if (!this.validateFileType(file)) {
                  this.$message.warning("暂不支持此类文件上传！")
                  fileList.pop();
                  return  false;
                }
                if (!this.validateFileSize(file)) {
                  this.$message.warning("单个文件最大可上传20M，请重新上传！")
                  fileList.pop()
                  return  false;
                }
                if (fileList.length >= 4) {
                  this.$message.warning("很抱歉，最多只能上传3个附件！")
                  fileList.pop()
                  return false;
                }
                //过滤重复文件
                let filterFileList =  fileList.filter((fileItem, index, self) => {
                  //存放文件名称的数组
                  let fileNameList = []
                  fileList.forEach(fileTemp => {
                    if(fileTemp.name != undefined) {
                      fileNameList.push(fileTemp.name);
                    }
                  })
                  return fileNameList.indexOf(fileItem.name) === index ;
                })
                this.uploadFileList = filterFileList
              },
              handleUploadFileRemove(file, fileList) {

              },
              //校验文件类型
              validateFileType(file) {
                if (file.name != undefined) {
                  let type = file.name.substring(file.name.lastIndexOf(".")+1)
                  return this.fileType.indexOf(type) !== -1 ? true : false
                }
              },
              batchUploadFile() {
                if ( this.uploadFileList.length == 0 ) {
                  return
                }
                if (this.uploadFileList.length > 3) {
                  this.$message.warning("很抱歉，最多只能上传3个附件！")
                  return
                }
                let formData = new FormData;
                this.uploadFileList.map(file => {
                  formData.append('files', file.raw);
                })
                let config = {
                  headers: {
                    'Content-Type': 'multipart/form-data'
                  }
                }
                this.$axios.post(`${process.env.VUE_APP_BASE_API}/busi/upload/file?code=6`,formData, config).then(res => {
                  res = res.data
                  if (res.code === 200) {
                    let tempFileList = res.result
                    if (tempFileList.length > 0) {
                      let tempUploadErrFlag = false
                let uploadErrStr = ""
                tempFileList.forEach(fileItem => {
                  if (fileItem.fileStatus == 1) {
                    this.addCourseForm.annexList.push(
                      {
                        fileName : fileItem.fileName,
                        filePath: fileItem.filePath,
                        sort : fileItem.sort
                      }
                    )
                  } else {
                    tempUploadErrFlag = true
                    let tempName = (this.uploadFileList[fileItem.sort] &&  this.uploadFileList[fileItem.sort].name) ? this.uploadFileList[fileItem.sort].name  : ""
                    uploadErrStr =  uploadErrStr + "," + tempName
                  }
                })
                if (tempUploadErrFlag == true) {
                  // this.$alert(`附件${uploadErrStr} 上传失败`, "错误", {type : "error"})
                }
                this.savePrePareLesson()
              }
            } else {
              this.$alert("附件上传失败！" + res.message, "错误", {type : "error"})
            }
          })
        },
        //校验文件大小 小于等于 20M
        validateFileSize(file) {
          if (file.size != undefined) {
            return   file.size / 1024 / 1024 < 20 ? true : false
          }
        },
        /** 文件上传结束**/

        /** 取消询问框相关**/
        elConfirmDialogSubmit() {
          this.cancelConfirm = false
          this.initAddCourseForm()
          this.$router.push("/personal/courseList")
        },
        elConfirmDialogCancel() {
          this.cancelConfirm = false
        },
        elConfirmDialogClose() {
          this.cancelConfirm = false
        },
        /** 表单提交相关 **/
        savePrePareLesson () {
          this.$refs.addCourseForm.validate(valid => {
            if (valid) {
              let params = {
                id: null,
                title : this.addCourseForm.title,
                type :this.addCourseForm.courseType,
                content : this.addCourseForm.courseContent.editor,
                semesterId : this.currentSemester.semesterId,
                term : this.currentSemester.term,
                schoolYear: this.currentSemester.schoolYear,
                subjectType : this.addCourseForm.subjectType,
                subjectId : this.currentSubject.subjectId,
                subjectName : this.currentSubject.subjectName,
                subjectCode : this.currentSubject.subjectCode,
                subjectLevel : this.currentSubject.subjectLevel,
                grade : this.addCourseForm.gradeType,
                anndexList : JSON.stringify(this.addCourseForm.annexList), //附件列表
                classList : this.JSONStringifyClassList(this.addCourseForm.classData)
              }
              saveOrUpdatePLesson(params).then(res => {
                if (res.code === 200) {
                  this.$alert("保存成功！", "提示", {type : "success",
                    callback : () => {
                      this.$router.push({path : "/personal/courseList"})
                    }
                  })
                } else {
                  this.$alert("保存失败！" + res.message, "错误", {type : "error"})
                }
              })
            } else {
              this.$alert("输入有误，请检查", "提示", {type : "warning"})
            }
          })
        },
        //序列化班级信息
        JSONStringifyClassList(classArr) {
          let resArr = []
          classArr.forEach(classId => {
            let tempClassDetail = this.getClassDetailById(classId)
            if (tempClassDetail) {
              resArr.push(tempClassDetail)
            }
          })
          return JSON.stringify(resArr)
        },
        addCourseFormSubConfirm() {
          if (this.uploadFileList.length > 0) {
            this.uploadFileList.forEach((item, index) => {
              this.addCourseForm.annexList.push({
                fileName : item.name,
                filePath : item.response.result,
                sort : index
              })
            })
          }
          this.savePrePareLesson()
        },
        //表单初始化
        initAddCourseForm() {
          //缺少富文本字段
          this.addCourseForm = {
            title: '',
            courseType: '',
            subjectType: '',
            gradeType: '',
            annexList: [],
            classData: [],
          }
        },
        /**清除校验**/
        clearFormValidate(prop) {
          this.$refs.addCourseForm.clearValidate(prop)
        },
        /** 文件上传相关**/
        //文件删除
        deleteAnnex(index) {
          if (index > this.uploadFileList.length) {
            return ;
          }
          this.uploadFileList.splice(index, 1);
        },

        /**** 初始化 ****/
        //获取科目信息
        initSubjectList() {
          let params = {
          }
          getSubjectList(params).then(res => {
            if(res.code == 200) {
              this.subjectTypeData = this.formatSubjectList(res.result)
            } else {
              this.$alert("获取学科数据失败！" + res.message, "错误", {type : "error"})
            }
          })
        },
        //
        formatSubjectList(array) {
          if(!array || !Array.isArray(array) || array.length <= 0) {
            this.$alert('学校还未维护学科选项信息，请联系华育技术支持进行初始化！', '提示', {
              confirmButtonText: '我知道了',
            });
            return []
          }
          let tempArr = []
          array.forEach(item => {
            let tempItem = {
              subjectId: item.id,
              subjectName : item.name,
              subjectCode : item.code,
              subjectType : item.type,
              subjectLevel :  item.level
            }
            tempArr.push(tempItem)
          })
          return tempArr
        },
        //学科变化获取当前学科详情
        handleSubjectChange() {
          if (!this.addCourseForm.subjectType || this.subjectTypeData.length <= 0) {
            return null;
          }
          for (let item of this.subjectTypeData) {
            if (item.subjectId == this.addCourseForm.subjectType) {
              this.currentSubject = item
            }
          }
         },
        //根据学科Id获取详情
        getSubjectMsgById(subjectId) {
          if (!subjectId || this.subjectTypeData.length <= 0) {
            return null;
          }
          for (let item of this.subjectTypeData) {
            if (item.subjectId == subjectId) {
              return item;
            }
          }
          return null;
        },
        initGradeList() {
          this.gradeTypeData= []
          getSchoolGradeList().then(res => {
            if (res.code === 200) {
              if (res.result && res.result.length && res.result.length > 0) {
                // this.gradeTypeData = res.result;
                let schoolGradeList   = res.result
                let school_id = sessionStorage.getItem("schoolId")
                let user_id = this.userInfo.id
                // let tempUrl = 'http://v4.test.cotf.cn'
                this.$axios.get(`${process.env.VUE_APP_TDK_API}/api/classes/schedules/getTeachClassesByUserId?user_id=${user_id}&school_id=${school_id}`).then(res => {
                 if  (res.data.code == 200) {
                   res.data.data = [
                     {
                     distanceYear : 4,
                     classId : '3c8ea97f5b5fa072ad45959426ff3f8acfcbe356'
                    },
                     {
                       distanceYear : 0,
                       classId : '49d0b48f19e54b84a3c2fbca833b54a2'
                     },
                     {
                      distanceYear: 0,
                       classId : '2d1133e420474cf5be7ee654f7d2e5d4'
                     }


                   ]

                  let tempGradeList =  res.data.data
                   this.phpGradeList = res.data.data
                   if (tempGradeList && Array.isArray(tempGradeList) && tempGradeList.length > 0) {
                     let distanceYearList = []
                     // 去重年级
                    tempGradeList.forEach(item => distanceYearList.push(item.distanceYear ))
                   let  filterDistanceList =    Array.from(new Set([...distanceYearList]))
                     for (let gradeItem of schoolGradeList) {
                       for (let gradeCode of filterDistanceList) {
                         if (gradeItem.distanceYear == gradeCode) {
                           this.gradeTypeData.push(gradeItem)
                         }
                       }
                     }
                   }
                 } else {
                   this.gradeTypeData = []
                 }
                })

              } else {
                this.$alert('学校还未维护年级选项信息，请联系华育技术支持进行初始化！', '提示', {
                  confirmButtonText: '我知道了',
                });
              }
            } else {
              this.$alert("获取年级选项列表失败！" + res.message, "错误", {type : "error"})
            }
          })
        },
        formatSchoolGrade(array) {
          if(!array || !Array.isArray(array) || array.length <= 0) {
            return []
          }
          let tempArr = []
          array.forEach(item => {
            let temItem = {
              gradeId : item.id,
              gradeName : item.name,
              distanceYear : item.distanceYear
            }
            tempArr.push(temItem)
          })
        return tempArr;
        },
        getGradeMsgByDistanceYear(distanceYear) {
          if (this.gradeTypeData && this.gradeTypeData.length && this.gradeTypeData.length > 0) {
            for (let item of this.gradeTypeData) {
              if (item.distanceYear == distanceYear) {
                return item;
              }
            }
          }
          return null;
        },
        handleChangeSemester() {
          if (!this.addCourseForm.semesterCode || this.schoolSemesterList.length < 0){
            return null
          }
          for (let item of this.schoolSemesterList) {
            if (item.code == this.addCourseForm.semesterCode) {
              if (item.code.length >= 5 ) {
                this.currentSemester.semesterId = item.semesterId
                this.currentSemester.schoolYear = item.code.substr(0, 4)
                this.currentSemester.term = item.code.substr(4, 1)
              }

            }
          }
        },
        initSchoolSemester() {
          getSchoolSemesterList().then(res => {
           if ( res.code == 200) {
              if (res.result && Array.isArray(res.result) && res.result.length > 0) {
                let tempSemesterList  = res.result
                tempSemesterList.forEach(semesterItem => {
                  let year = parseInt(semesterItem.schoolYear) + parseInt(1)
                  let term = semesterItem.term == 1 ? "第一学期" : "第二学期"
                  let label   =  `${parseInt(semesterItem.schoolYear)}年-${year}年${term}`
                  let code = `${semesterItem.schoolYear}${semesterItem.term}`
                  let semesterId = semesterItem.id
                  this.schoolSemesterList.push({label, code, semesterId})

                })
                this.schoolSemesterList.sort(this.compare('code'))
                // this.currentSemester.semesterId = this.schoolSemesterList[0].semesterId
                // this.currentSemester.schoolYear = this.schoolSemesterList[0].code.substr(0, 4)
                // this.currentSemester.term = this.schoolSemesterList[0].code.substr(4, 1)
                // this.addCourseForm.semesterCode = this.schoolSemesterList[0].code

               let now = new Date()
                let flag = false
               for (let item of tempSemesterList) {
                 // 默认选中学年学期当前学年学期
                if ( moment(now).isBetween(item.startDate , item.endDate)) {
                  flag = true
                  let tempCode =  `${item.schoolYear}${item.term}`
                  this.currentSemester.semesterId = item.id
                  this.currentSemester.schoolYear = tempCode.substr(0, 4)
                  this.currentSemester.term = tempCode.substr(4, 1)
                  this.addCourseForm.semesterCode = tempCode
                }
               }
              if (!flag) {
                this.currentSemester.semesterId = this.schoolSemesterList[0].semesterId
                this.currentSemester.schoolYear = this.schoolSemesterList[0].code.substr(0, 4)
                this.currentSemester.term = this.schoolSemesterList[0].code.substr(4, 1)
                this.addCourseForm.semesterCode = this.schoolSemesterList[0].code
              }
              } else {
                this.$alert('学校还未维护学年学期信息，请联系华育技术支持进行添加！', '提示', {
                  confirmButtonText: '我知道了',
                });
              }
           } else {
             this.$alert("获取学年学期数据失败！" + res.message, "错误", {type: "error"})
           }
          })
        },
        /**** 初始化结束 ****/

        //获取当前学年学期信息
        handleCurrentSemester: function () {
          getSchoolSemesterList().then(res => {
            if (res.code === 200) {
              if (!res.result || !Array.isArray(res.result) || res.result.length <= 0) {
                this.$alert('学校还未维护学年学期信息，请联系华育技术支持进行添加！', '提示', {
                  confirmButtonText: '我知道了',
                });
                return
              } else {
                this.schoolSemesterList = res.result;
                let schoolSemester = getCurrentSemesterTerm()
                this.currentSemester.schoolYear = schoolSemester[0]
                this.currentSemester.term = schoolSemester[1]
                let currentSemesterItem =  this.schoolSemesterList.filter(item => item.schoolYear == this.currentSemester.schoolYear && item.term == this.currentSemester.term)
                if(currentSemesterItem.length <= 0) {
                  this.$alert('学校还未维护当前学年学期信息，请联系华育技术支持进行初始化！', '提示', {
                    confirmButtonText: '我知道了',
                  });
                }
                this.currentSemester.semesterId = currentSemesterItem[0].id
              }
            } else {
              this.$alert("获取学年学期数据失败！" + res.message, "错误", {type: "error"})
            }
          });
        },
        //根据班级id详情
        getClassDetailById(id) {
            for (let item of this.classData) {
              if (item.classId == id) {
                return item
              }
            }
          return null
        },
       handleEditorMouseEnter(){
          this.$refs.editor.focus()
       },
       compare (propertyName) {
          return function (object1, object2) {
            let value1 = object1[propertyName]
            let value2 = object2[propertyName]
            if (value2 > value1) {
              return 1
            } else if (value2 < value1) {
              return -1
            } else {
              return 0
            }
          }
       }
      },
      created() {
        // this.handleCurrentSemester()
        this.initSubjectList()
        this.initGradeList()
        this.initSchoolSemester()

      },
      mounted() {
        this.$refs.addCourseForm.clearValidate();
        this.$refs.elInput.focus()
      }
    }
</script>

<style scoped lang="scss">
  .course-add {
    .el-form-item__error {
      top: 25% !important;
      right: 0 !important;
    }
  }

</style>
